import './InspectionList.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

import { Spin, message } from 'antd'
import { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { useEventEmitter, useMount, useRequest } from 'ahooks'
import { Autoplay, Pagination, Navigation, Parallax } from 'swiper'

import { CMTBox } from '../Command/CMT'
import { Http } from '../../../../Common/Api'
import { TableList } from '../Modal/TableList'

import { project } from '../../../../Common/Data'

const { imageUrl } = project[window.location.hostname]

const StatusList = {
    0: '离线',
    1: '在线',
    2: '离线',
    11: '呼叫中...',
    12: '通话中...',
}

export const InspectionListA01 = ({ type, Active, CMT_ADMIN }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const UserEvent = useEventEmitter()
    const CMTEvent = useEventEmitter()

    const [UserList, setUserList] = useState()
    const [Status, setStatus] = useState({})

    UserEvent.useSubscription(val => {
        setStatus(val)
    })

    const { runAsync: getOther } = useRequest(Http, {
        manual: true,
        onSuccess: res => setUserList(res.helmet),
    })

    useMount(() => {
        if (CMT_ADMIN) getOther({ url: 'getTalkHelmet' })
    })

    const onCall = (num, status) => {
        if (!status) {
            messageApi.info('设备初始化中!')
            return
        }
        if (status === '2') {
            messageApi.info('该设备不在线!')
            return
        }
        CMTEvent.emit(num)
    }

    return (
        <div className="InspectionListA01">
            {contextHolder}
            {CMT_ADMIN && (
                <div className="call">
                    {UserList ? (
                        <Swiper
                            modules={[Autoplay]}
                            className="SwiperBox"
                            loop={true}
                            autoplay={true}
                            slidesPerView={4}
                            spaceBetween={8}
                        >
                            {UserList.map(({ uuid, deviceSerial, helmetType, personName }) => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={uuid}
                                    onClick={() => onCall(deviceSerial, Status[deviceSerial])}
                                >
                                    <img src={imageUrl + 'callA01.png'} alt="" />
                                    <div>{personName}</div>
                                    <div>{StatusList[Status[deviceSerial]] || '初始化...'}</div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    ) : (
                        <Spin />
                    )}
                    <CMTBox CMT_ADMIN={CMT_ADMIN} UserEvent={UserEvent} CMTEvent={CMTEvent} />
                </div>
            )}
            <TableList
                data={{
                    title: '安全巡检',
                    type,
                    OrganizationUuid: Active !== '00000000-0000-0000-0000-000000000000' ? Active : '',
                }}
            />
        </div>
    )
}
